<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>InferCare肺结节全程管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="js/layuiadmin/layui/css/layui.css" media="all">
  <style>
    body, html {
        height: 120%;
        margin: 0;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        background-color: #f0f2f5;
    }

    .header-text {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px; /* 固定字体大小 */
        font-family: '黑体', sans-serif;
        font-weight: bold;
        padding: 20px 0; /* 上下内边距 */
        position: absolute; /* 绝对定位，确保标题在顶部 */
        top: 0;
        width: 100%;
        background-color: #f0f2f5; /* 背景颜色与页面背景一致 */
    }

    .top-link {
        position: absolute;
        top: 20px;
        left: 20px;
        text-decoration: none;
        color: #4096ee;
        font-size: 16px; /* 固定字体大小 */
        font-family: '黑体', sans-serif;
        font-weight: bold;
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center; /* 水平居中 */
        width: 100%;
        max-width: 1200px; /* 设置最大宽度，防止内容在大屏幕上过于分散 */
        padding: 0 20px; /* 左右内边距 */
        box-sizing: border-box;
        background-color: transparent; /* 透明背景色 */
    }

    .outer-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        width: 100%;
    }

    .item-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        margin-bottom: 20px;
        width: calc(33.333% - 20px); /* 每个项目占据三分之一的宽度 */
        min-width: 360px; /* 最小宽度 */
        box-sizing: border-box;
    }

    .circle-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        color: white;
        font-size: 24px;
        font-family: '黑体', sans-serif;
        font-weight: bold;
        background-color: #4096ee;
    }

    .circle-container2 {background-color: #2E8B57;}
    .circle-container3 {background-color: #FFA500;}

    .description {
        margin: 20px 0;
        font-size: 16px; /* 固定字体大小 */
        font-family: '黑体', sans-serif;
        font-weight: bold;
        text-align: center;
        line-height: 1.5;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .bordered-div {
        width: 92%; /* 占满父容器的宽度 */
        height: 160px; /* 根据内容自动调整高度 */
        display: flex;
        align-items: center;
        background-color: #fff;
        font-size: 14px;
        padding: 10px; /* 统一内边距 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果，增加美观度 */
    }

    .bordered-div:hover {
        background-color: #4096ee;
        color: white;
    }

    .bordered-div ul {
      padding-left: 20px;
      padding-top: 0;
    }

    .bordered-div ul li {
        margin-bottom: 5px;
        list-style: inside square;
    }

    @media (min-width: 1920px) {
        .content-wrapper {
            width: 100%;
            max-width: 1920px; /* 设置最大宽度为1920px */
        }

        .item-container {
            width: calc(33.333% - 20px); /* 每个项目占据三分之一的宽度 */
            min-width: 400px; /* 增加最小宽度 */
        }

        .circle-container {
            width: 200px;
            height: 200px;
            font-size: 32px;
        }

        .description {
            font-size: 20px; /* 增大字体大小 */
        }

        .bordered-div {
            width: 90%; /* 占满父容器的宽度 */
            height: 200px; /* 增加高度 */
            font-size: 16px;
        }

        .bordered-div ul li {
            font-size: 16px;
        }
    }
  </style>
</head>
<body>
<div class="header-text">
  InferCare系统，帮助临床医生管理、诊断和护理患者。
</div>
<a href="choose.html" class="top-link">点击了解</a>
<div class="content-wrapper">
  <div class="outer-container">
    <div class="item-container">
        <div class="circle-container">患者发现</div>
        <div class="description">
          汇聚全院潜在肺癌风险患者<br/>
          高效统一管理
        </div>
        <div class="bordered-div">
          <ul>
            <li><b>自动识别</b>：通过AI自动分析全院胸部CT图像，自动识别潜在肺癌风险患者</li>
            <li><b>高效入组</b>：自动通知新增高危患者，临床医生实时入组</li>
          </ul>
        </div>
    </div>
    <div class="item-container">
        <div class="circle-container circle-container2">跟踪和管理</div>
        <div class="description">
          持续跟踪、自动随访<br/>
          提高随访覆盖率
        </div>
        <div class="bordered-div">
          <ul>
            <li><b>患者分层</b>:统一视图展示入组患者，查看管理患者详情</li>
            <li><b>自动随访</b>:自动生成随访计划，自动通知患者复诊</li>
            <li><b>自动追踪</b>:自动追踪结节变化，评估病灶自然病程</li>
            <li><b>高危预警</b>:自动警报提示高危患者状态，协助管理专员引导患者回归正确随诊路径</li>
          </ul>
        </div>
    </div>
    <div class="item-container">
        <div class="circle-container circle-container3">肺癌AI评估</div>
        <div class="description">
          辅助临床医生做出最佳临床决策<br/>
          改善个体医生诊疗差异
        </div>
        <div class="bordered-div">
          <ul>
            <li><b>提高准确性</b>：提高肺结节/肺癌评估准确性</li>
            <li><b>减少个体差异</b>：改善个体医生的之间的诊断差异</li>
          </ul>
        </div>
    </div>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/layuiadmin/layui/layui.js"></script>
</body>
</html>